<template>
    <el-input v-model="keyword" placeholder="关键词" clearable>
        <template #append>
            <el-select v-model="engineeName" placeholder="搜索" style="width: 8em" @visible-change="onSearch">
                <el-option :label="item.text" :value="item.name" v-for="(item, idx) of engineeList" :key="idx" />
            </el-select>
        </template>
    </el-input>
</template>

<script setup>
/**
 * 搜索栏组件
 */
import { ref } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();
import engineeList from '@/mock/_search';

// 关键词
const keyword = ref('');
// 选中的搜索引擎名称
const engineeName = ref('');

// 执行搜索事件
const onSearch = (visible) => {
    if (!visible) {
        engineeList.filter(v => v.name == engineeName.value).forEach(item => {
            if (item.name == 'site') {
                router.push({ name: 'search', query: { s: keyword.value } });
            } else {
                window.open(item.link.replace('__keyword__', keyword.value), "_blank");
            }
        })
    }
}
</script>